<script src="@/js/gongju/bazipaipan.js"></script>

<template>
  <div class="bazi" id="app">
    <div class="margins">
      <!-- ★ 导航 ★ -->
      <div class="navigations">
        <div class="leftNavigations">
          <Breadcrumb separator=">">
            <span v-for="item in topLeftNavigations" :key="item">
              <BreadcrumbItem :to="item.link">
                <Icon :type="item.icon" />
                {{ item.title }}
              </BreadcrumbItem>
            </span>
          </Breadcrumb>
        </div>

        <div class="rightNavigations">
          更多工具：
          <span v-for="item in topRightNavigations" :key="item" class="spacing">
            <router-link :to="item.link">
              {{ item.title }}
              <Icon :type="item.icon" />
            </router-link>
          </span>
          <span class="r"></span>
        </div>
        <div class="morePrediction" style="margin-top: -20px">
          <el-dropdown :hide-on-click="true">
            <span class="el-dropdown-link">
              更多工具
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- <el-dropdown-item
                  ><router-link to="/gongju/bazi">
                    八字排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item> -->
                <el-dropdown-item>
                  <router-link to="/gongju/qimendunjia">
                    奇门排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item
                  ><router-link to="/gongju/meihuayishu">
                    梅花易数起卦
                    <Icon type="ios-open-outline" />
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item
                  ><router-link to="/gongju/liuyao">
                    六爻起卦
                    <Icon type="ios-open-outline" />
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="/gongju/PaiPan">
                    紫微斗数排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="divider">
          <el-divider />
        </div>
      </div>

      <!-- ★ 示例数据、选项 ★ -->
      <div class="sl-data" v-show="dataPage == 1" style="width: 100%">
        <Row style="width: 100%">
          <!-- 1.1、示例数据 -->
          <Col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="16"
            :xl="16"
            v-if="dataShiLiStatus"
            style="margin-bottom: 16px"
          >
            <el-card shadow="never" class="sl-card">
              <template #header>
                <div class="header">示例预览</div>
              </template>

              <div>
                <Row>
                  <!-- 1.1.1、基础 -->
                  <Col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
                    <el-card shadow="never" class="jc">
                      <div class="data">
                        <div>
                          <Tag size="medium" class="tag">
                            <b>公历日期：</b>{{ dataShiLi.solarStr }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>农历日期：</b>{{ dataShiLi.lunarStr }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <Row>
                              <Col span="12"
                                ><b>星期：</b>{{ dataShiLi.week }}</Col
                              >
                              <Col span="12"
                                ><b>季节：</b>{{ dataShiLi.season }}</Col
                              >
                            </Row>
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <Row>
                              <Col span="12"
                                ><b>生肖：</b>{{ dataShiLi.zodiac }}</Col
                              >
                              <Col span="12"
                                ><b>星座：</b>{{ dataShiLi.constellation }}</Col
                              >
                            </Row>
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>生辰八字：</b
                            >{{ dataShiLi.baZi.join("&nbsp;&nbsp;") }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>八字五行：</b>
                            <span
                              v-for="index in dataShiLi.baZiWuXing.length"
                              :key="index"
                            >
                              <span
                                v-html="wxc2(dataShiLi.baZiWuXing[index - 1])"
                              ></span>
                              <span v-if="index !== dataShiLi.baZiWuXing.length"
                                >&nbsp;&nbsp;</span
                              >
                            </span>
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>八字空亡：</b
                            >{{ dataShiLi.baZiKongWang.join("&nbsp;&nbsp;") }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>八字纳音：</b
                            >{{ dataShiLi.baZiNaYin.join("&nbsp;&nbsp;") }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>五行缺失：</b
                            ><span
                              v-if="
                                dataShiLi.baZiWuXingQueShi[0] === '五行齐全'
                              "
                              >五行齐全</span
                            >
                            <span v-else>
                              <span
                                v-for="index in dataShiLi.baZiWuXingQueShi
                                  .length"
                                :key="index"
                              >
                                缺<span
                                  v-html="
                                    wxc(dataShiLi.baZiWuXingQueShi[index - 1])
                                  "
                                ></span
                                >&nbsp;
                              </span>
                            </span>
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>五行数量：</b
                            ><span
                              v-for="index in dataShiLi.baZiWuXingCount.length"
                              :key="index"
                            >
                              {{
                                dataShiLi.baZiWuXingCount[index - 1].substring(
                                  0,
                                  1
                                )
                              }}<span
                                v-html="
                                  wxc(
                                    dataShiLi.baZiWuXingCount[
                                      index - 1
                                    ].substring(1, 2)
                                  )
                                "
                              ></span
                              >&nbsp;
                            </span>
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>起运日期：</b>{{ dataShiLi.qiYunDate }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>起运信息：</b>{{ dataShiLi.qiYun }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>胎元胎息：</b>{{ dataShiLi.taiYuan }}、{{
                              dataShiLi.taiXi
                            }}
                          </Tag>
                        </div>

                        <div>
                          <Tag size="medium" class="tag">
                            <b>命宫身宫：</b>{{ dataShiLi.mingGong }}、{{
                              dataShiLi.shenGong
                            }}
                          </Tag>
                        </div>
                      </div>
                    </el-card>
                  </Col>

                  <!-- 1.1.2、命盘 -->
                  <Col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
                    <el-card shadow="never" class="mp">
                      <div class="data">
                        <!-- 上半部分 -->
                        <div class="top">
                          <div class="left">
                            <span class="name">缘主</span>
                            <span class="mark">（{{ dataShiLi.zao }}）</span>
                          </div>
                          <div class="right">
                            <router-link to="/culture/sx">
                              <b class="sx">{{ dataShiLi.zodiac }}</b>
                            </router-link>
                          </div>
                        </div>

                        <!-- 下半部分 -->
                        <div class="bottom">
                          <Row class="bc1">
                            <Col span="4" class="title">☯</Col>
                            <Col span="5" class="title">年柱</Col>
                            <Col span="5" class="title">月柱</Col>
                            <Col span="5" class="title">日柱</Col>
                            <Col span="5" class="title">时柱</Col>
                          </Row>

                          <Row class="bc2">
                            <Col span="4" class="title">主星</Col>
                            <Col span="5">{{
                              dataShiLi.yearGanZhiZhuXing
                            }}</Col>
                            <Col span="5">{{
                              dataShiLi.monthGanZhiZhuXing
                            }}</Col>
                            <Col span="5"
                              ><b>{{ dataShiLi.dayGanZhiZhuXing }}</b></Col
                            >
                            <Col span="5">{{
                              dataShiLi.hourGanZhiZhuXing
                            }}</Col>
                          </Row>

                          <Row class="bc3">
                            <Col span="4" class="title">天干</Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.yearGan)"></b>
                              <span v-html="gzwx(dataShiLi.yearGan)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.monthGan)"></b>
                              <span v-html="gzwx(dataShiLi.monthGan)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.dayGan)"></b>
                              <span v-html="gzwx(dataShiLi.dayGan)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.hourGan)"></b>
                              <span v-html="gzwx(dataShiLi.hourGan)"></span>
                            </Col>
                          </Row>

                          <Row class="bc4">
                            <Col span="4" class="title">地支</Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.yearZhi)"></b>
                              <span v-html="gzwx(dataShiLi.yearZhi)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.monthZhi)"></b>
                              <span v-html="gzwx(dataShiLi.monthZhi)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.dayZhi)"></b>
                              <span v-html="gzwx(dataShiLi.dayZhi)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataShiLi.hourZhi)"></b>
                              <span v-html="gzwx(dataShiLi.hourZhi)"></span>
                            </Col>
                          </Row>

                          <Row class="bc5">
                            <Col span="4" class="title2">藏干</Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.yearZhiCangGan.length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataShiLi.yearZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataShiLi.yearZhiCangGan[index - 1])
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.monthZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataShiLi.monthZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataShiLi.monthZhiCangGan[index - 1])
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.dayZhiCangGan.length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataShiLi.dayZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataShiLi.dayZhiCangGan[index - 1])
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.hourZhiCangGan.length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataShiLi.hourZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataShiLi.hourZhiCangGan[index - 1])
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                          </Row>

                          <Row class="bc6">
                            <Col span="4" class="title2">副星</Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.yearGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataShiLi.yearGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.monthGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataShiLi.monthGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.dayGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataShiLi.dayGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataShiLi.hourGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataShiLi.hourGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                          </Row>

                          <Row class="bc1">
                            <Col span="4" class="title">星运</Col>
                            <Col span="5">{{ dataShiLi.yearGanZhiDiShi }}</Col>
                            <Col span="5">{{ dataShiLi.monthGanZhiDiShi }}</Col>
                            <Col span="5">{{ dataShiLi.dayGanZhiDiShi }}</Col>
                            <Col span="5">{{ dataShiLi.hourGanZhiDiShi }}</Col>
                          </Row>

                          <Row class="bc2">
                            <Col span="4" class="title">空亡</Col>
                            <Col span="5">{{
                              dataShiLi.yearGanZhiKongWang
                            }}</Col>
                            <Col span="5">{{
                              dataShiLi.monthGanZhiKongWang
                            }}</Col>
                            <Col span="5">{{
                              dataShiLi.dayGanZhiKongWang
                            }}</Col>
                            <Col span="5">{{
                              dataShiLi.hourGanZhiKongWang
                            }}</Col>
                          </Row>

                          <Row class="bc1">
                            <Col span="4" class="title">纳音</Col>
                            <Col span="5">{{ dataShiLi.yearGanZhiNaYin }}</Col>
                            <Col span="5">{{ dataShiLi.monthGanZhiNaYin }}</Col>
                            <Col span="5">{{ dataShiLi.dayGanZhiNaYin }}</Col>
                            <Col span="5">{{ dataShiLi.hourGanZhiNaYin }}</Col>
                          </Row>

                          <Row class="bc7">
                            <Col span="4" class="title3">...</Col>
                            <Col span="18" class="title"
                              >排盘后查看更多数据</Col
                            >
                          </Row>
                        </div>
                      </div>
                    </el-card>
                  </Col>
                </Row>
              </div>
            </el-card>
          </Col>

          <!-- 1.2、示例数据加载框架 -->
          <Col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="16"
            :xl="16"
            v-if="!dataShiLiStatus"
            style="margin-bottom: 16px"
          >
            <el-card shadow="never" class="sl-card2">
              <Skeleton
                loading
                animated
                :title="false"
                :paragraph="{
                  rows: 15,
                  width: [
                    '70%',
                    '65%',
                    '70%',
                    '70%',
                    '80%',
                    '75%',
                    '80%',
                    '80%',
                    '90%',
                    '90%',
                    '70%',
                    '100%',
                    '80%',
                    '85%',
                    '100%',
                  ],
                }"
              />
            </el-card>
          </Col>

          <!-- 2、选项 -->
          <Col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="8"
            :xl="8"
            style="margin-bottom: 16px"
          >
            <el-card shadow="never" class="xx-card">
              <template #header>
                <div class="header">八字排盘</div>
              </template>

              <div>
                <div class="name">
                  <input
                    placeholder="请输入姓名（选填）"
                    v-model="name"
                    maxlength="10"
                  />
                </div>

                <div class="occupy">
                  <input
                    placeholder="请输入占事（选填）"
                    v-model="occupy"
                    maxlength="10"
                    @click="occupyPrompt"
                  />
                </div>

                <div class="dateType">
                  <el-segmented
                    class="segmented"
                    v-model="dateTypeStr"
                    :options="dateTypeOptions"
                  />
                </div>

                <div class="sex">
                  <el-segmented
                    class="segmented"
                    v-model="sexStr"
                    :options="sexOptions"
                  />
                </div>

                <div class="date">
                  <el-date-picker
                    :clearable="false"
                    v-model="date"
                    type="datetime"
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期"
                    :editable="false"
                    style="width: 70%"
                  />
                  <Checkbox
                    v-model="isLeapMonth"
                    :disabled="!isLeapMonthStatus"
                    class="leapMonth"
                  >
                    闰月
                  </Checkbox>
                </div>

                <div class="qiYunLiuPai">
                  起运流派：
                  <Select v-model="qiYunLiuPai" style="width: 50%">
                    <template #prefix>
                      <span class="prefix">
                        <Icon type="ios-planet-outline" />
                      </span>
                    </template>
                    <Option
                      v-for="item in qiYunLiuPaiOptions"
                      :label="item.label"
                      :value="item.value"
                    >
                      {{ item.label }}
                      <span v-if="item.value === 0" class="moren">
                        <Icon type="md-arrow-dropleft-circle" />
                        默认
                      </span>
                    </Option>
                  </Select>
                  <el-tooltip placement="top" :enterable="false">
                    <template #content>
                      按天和时辰计算：3天1年，1天4个月，1时辰10天。
                      <br />
                      按分钟计算：4320分=1年，360分=1月，12分=1天，1分=2小时。
                    </template>
                    <Icon class="tip" type="md-information-circle" />
                  </el-tooltip>
                </div>

                <div class="isRsettingAll">
                  <Button
                    shape="circle"
                    size="small"
                    @click="resettingAllMethod"
                  >
                    <Icon type="md-refresh" />
                    全部重置
                  </Button>
                </div>

                <div class="moreOptions">
                  <Button
                    shape="circle"
                    size="small"
                    @click="moreOptionsModal = true"
                  >
                    <Icon type="ios-settings" />
                    更多选项
                  </Button>
                </div>

                <div class="starts">
                  <Button
                    :loading="!startsButton"
                    style="width: 100%"
                    class="button"
                    @click="getWanZhengDataMethod"
                  >
                    <span v-if="startsButton">
                      开始排盘
                      <span v-show="isTrueSolar" style="font-size: 13px"
                        >(真太阳时)</span
                      >
                    </span>
                    <span v-else> 排盘中... </span>
                  </Button>
                </div>
              </div>
            </el-card>
          </Col>
        </Row>
      </div>

      <!-- ★ 完整数据 ★ -->
      <div class="wz-data" v-show="dataPage == 2">
        <Row style="width: 100%">
          <!-- 1、完整数据切换选项 -->
          <Col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="3"
            :xl="3"
            v-if="dataWanZhengStatus"
          >
            <!-- <el-affix :offset="70"> -->
            <el-card shadow="never" class="wzqh-card">
              <div class="data">
                <div class="button1" @click="returnPaiPanPageMethod">
                  <Icon type="ios-undo" />
                  返回
                </div>

                <div class="button2" @click="dataWanZhengPageMethod(1)">
                  <b v-show="dataWanZhengPage === 1" class="ml">
                    基本信息
                    <Icon type="md-arrow-dropright-circle" />
                  </b>
                  <span v-show="dataWanZhengPage !== 1"> 基本信息 </span>
                </div>

                <div class="button2" @click="dataWanZhengPageMethod(2)">
                  <b v-show="dataWanZhengPage === 2" class="ml">
                    命盘信息
                    <Icon type="md-arrow-dropright-circle" />
                  </b>
                  <span v-show="dataWanZhengPage !== 2"> 命盘信息 </span>
                </div>

                <div class="button2" @click="dataWanZhengPageMethod(3)">
                  <b v-show="dataWanZhengPage === 3" class="ml">
                    其他信息
                    <Icon type="md-arrow-dropright-circle" />
                  </b>
                  <span v-show="dataWanZhengPage !== 3"> 其他信息 </span>
                </div>
              </div>
            </el-card>
            <!-- </el-affix> -->
          </Col>

          <!-- 2.1、完整数据 -->
          <Col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="21"
            :xl="21"
            v-if="dataWanZhengStatus"
          >
            <el-card shadow="never" class="wz-card">
              <div class="data">
                <!-- 2.1.1、上半部分 -->
                <div class="header" style="position: relative">
                  <div class="left">
                    <template v-if="screenWidth >= 768 && screenWidth <= 992">
                      <div style="display: flex; align-items: center">
                        <span class="name">
                          <Ellipsis
                            :text="dataWanZheng.name"
                            :length="3"
                            tooltip
                            style="font-size: 20px"
                          />
                        </span>
                        <span class="mark" style="font-size: 15px"
                          >（{{ dataWanZheng.zao }}）</span
                        >
                      </div>
                      <span
                        class="date"
                        style="padding-left: 0; vertical-align: 0"
                      >
                        <span class="mr"
                          >公历：{{ dataWanZheng.solarStr }}</span
                        >
                        <span class="mr"
                          >农历：{{ dataWanZheng.lunarStr }}</span
                        >
                        <span class="mr">星期：{{ dataWanZheng.week }}</span>
                        <span class="mr">季节：{{ dataWanZheng.season }}</span>
                        <span class="ygz">
                          阴干支斜体
                          <el-switch
                            v-model="ganZhiYinYang"
                            size="small"
                            style="
                              --el-switch-on-color: #13ce66;
                              --el-switch-off-color: #bebebe;
                            "
                          ></el-switch>
                        </span>
                      </span>
                    </template>
                    <template v-if="screenWidth >= 360 && screenWidth <= 576">
                      <div style="display: flex; align-items: center">
                        <span class="name">
                          <Ellipsis
                            :text="dataWanZheng.name"
                            :length="3"
                            tooltip
                            style="font-size: 15px"
                          />
                        </span>
                        <span class="mark" style="font-size: 11px"
                          >（{{ dataWanZheng.zao }}）</span
                        >
                      </div>
                      <span
                        class="date"
                        style="padding-left: 0; vertical-align: 0"
                      >
                        <div>
                          <span class="mr" style="font-size: 11px"
                            >公历：{{ dataWanZheng.solarStr }}</span
                          ><br />
                          <span class="mr" style="font-size: 11px"
                            >农历：{{ dataWanZheng.lunarStr }}</span
                          >
                        </div>
                        <div>
                          <span class="mr" style="font-size: 11px"
                            >星期：{{ dataWanZheng.week }}</span
                          >
                          <span class="mr" style="font-size: 11px"
                            >季节：{{ dataWanZheng.season }}</span
                          >
                          <span class="ygz">
                            阴干支斜体
                            <el-switch
                              v-model="ganZhiYinYang"
                              size="small"
                              style="
                                --el-switch-on-color: #13ce66;
                                --el-switch-off-color: #bebebe;
                              "
                            ></el-switch>
                          </span>
                        </div>
                      </span>
                    </template>
                    <!-- <span class="date">
                    <span class="mr">公历：{{ dataWanZheng.solarStr }}</span>
                    <span class="mr">农历：{{ dataWanZheng.lunarStr }}</span>
                    <span class="mr">星期：{{ dataWanZheng.week }}</span>
                    <span class="mr">季节：{{ dataWanZheng.season }}</span>
                    <span class="ygz">
                      阴干支斜体
                      <el-switch v-model="ganZhiYinYang" size="small"
                        style="--el-switch-on-color:#13ce66; --el-switch-off-color:#bebebe;"></el-switch>
                    </span>
                  </span> -->
                  </div>
                  <div
                    class="right"
                    style="
                      position: absolute;
                      right: 0;
                      top: 15px;
                      margin-top: 0;
                    "
                  >
                    <router-link to="/culture/sx">
                      <b class="sx">{{ dataWanZheng.zodiac }}</b>
                    </router-link>
                  </div>
                </div>

                <!-- 2.1.2、下半部分 -->
                <div class="data">
                  <!-- 基本信息 -->
                  <div class="jiBen" v-show="dataWanZhengPage == 1">
                    <!-- 数据一 -->
                    <div class="jb1">
                      <Row class="bc1">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">缘主姓名</span>
                          <span>{{ dataWanZheng.name }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">缘主性别</span>
                          <span>{{ dataWanZheng.sex }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">缘主占事</span>
                          <span v-if="dataWanZheng.occupy == ''" class="null"
                            >未知</span
                          >
                          <span v-if="dataWanZheng.occupy != ''">{{
                            dataWanZheng.occupy
                          }}</span>
                        </Col>
                      </Row>

                      <Row class="bc2">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">公历日期</span>
                          <span>{{ dataWanZheng.solarStr }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">农历日期</span>
                          <span>{{ dataWanZheng.lunarStr }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">生肖星座</span>
                          <span
                            >{{ dataWanZheng.zodiac }}、{{
                              dataWanZheng.constellation
                            }}</span
                          >
                        </Col>
                      </Row>

                      <Row class="bc1">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">生辰八字</span>
                          <span>{{
                            dataWanZheng.baZi.join("&nbsp;&nbsp;")
                          }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">八字五行</span>
                          <span>{{
                            dataWanZheng.baZiWuXing.join("&nbsp;&nbsp;")
                          }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">八字空亡</span>
                          <span>{{
                            dataWanZheng.baZiKongWang.join("&nbsp;&nbsp;")
                          }}</span>
                        </Col>
                      </Row>

                      <Row class="bc2">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title2">八字纳音</span>
                          <span>{{
                            dataWanZheng.baZiNaYin.join("&nbsp;&nbsp;")
                          }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">年命信息</span>
                          <span>{{ dataWanZheng.yearGanZhiNaYin }}命</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">命卦信息</span>
                          <span>{{ dataWanZheng.mingGua }}</span>
                        </Col>
                      </Row>

                      <Row class="bc1">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">日主属性</span>
                          {{ dataWanZheng.dayZhuAttribute }}
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                          <span class="title">出生节气</span>
                          <span>{{ dataWanZheng.birthSolarTerms }}</span>
                        </Col>
                      </Row>

                      <Row class="bc2">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title"
                            >{{ dataWanZheng.prevJieQi }}日期</span
                          >
                          <span>{{ dataWanZheng.prevJieQiDate }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title"
                            >{{ dataWanZheng.nextJieQi }}日期</span
                          >
                          <span>{{ dataWanZheng.nextJieQiDate }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">星宿信息</span>
                          <span
                            >{{ dataWanZheng.xingXiu }}（{{
                              dataWanZheng.xiuJiXiong
                            }}）</span
                          >
                        </Col>
                      </Row>

                      <Row class="bc1">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">起运日期</span>
                          <span>{{ dataWanZheng.qiYunDate }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                          <span class="title">起运信息</span>
                          <span>{{ dataWanZheng.qiYun }}</span>
                        </Col>
                      </Row>

                      <Row class="bc2">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title2">胎元胎息</span>
                          <span
                            >{{ dataWanZheng.taiYuan }}、{{
                              dataWanZheng.taiXi
                            }}</span
                          >
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title2">命宫身宫</span>
                          <span
                            >{{ dataWanZheng.mingGong }}、{{
                              dataWanZheng.shenGong
                            }}</span
                          >
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">身体强弱</span>
                          <span>{{ dataWanZheng.bodyIntensity }}</span>
                        </Col>
                      </Row>

                      <Row class="bc1">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">喜用神&nbsp;&nbsp;&nbsp;</span>
                          <span
                            v-if="dataWanZheng.xiYongShen.length === 0"
                            class="null"
                          >
                            未知
                          </span>
                          <span v-else>
                            {{ dataWanZheng.xiYongShen.join("&nbsp;&nbsp;") }}
                          </span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title4">喜用神方位</span>
                          <span
                            v-if="dataWanZheng.xiYongShenFangWei.length === 0"
                            class="null"
                          >
                            未知
                          </span>
                          <span v-else>
                            <span
                              v-for="index in dataWanZheng.xiYongShenFangWei
                                .length"
                              :key="index"
                            >
                              <span>{{
                                dataWanZheng.xiYongShenFangWei[index - 1]
                              }}</span>
                              <span
                                v-if="
                                  index !==
                                  dataWanZheng.xiYongShenFangWei.length
                                "
                                >、</span
                              >
                            </span>
                          </span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title2">五行缺失</span>
                          <span
                            v-if="
                              dataWanZheng.baZiWuXingQueShi[0] === '五行齐全'
                            "
                            >五行齐全</span
                          >
                          <span v-else>
                            <span
                              v-for="index in dataWanZheng.baZiWuXingQueShi
                                .length"
                              :key="index"
                            >
                              缺<span
                                v-html="
                                  wxc(dataWanZheng.baZiWuXingQueShi[index - 1])
                                "
                              ></span>
                              <span
                                v-if="
                                  index !== dataWanZheng.baZiWuXingQueShi.length
                                "
                                >、</span
                              >
                            </span>
                          </span>
                        </Col>
                      </Row>

                      <Row class="bc2">
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title2"
                            >月将&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                          >
                          <span>{{ dataWanZheng.yueJiang }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title2"
                            >月将神&nbsp;&nbsp;&nbsp;&nbsp;</span
                          >
                          <span>{{ dataWanZheng.yueJiangShen }}</span>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                          <span class="title">人元司令</span>
                          <span>{{ dataWanZheng.renYuan }}</span>
                        </Col>
                      </Row>
                    </div>

                    <Row>
                      <!-- 数据二 -->
                      <Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <div class="jb2">
                          <div class="title">五行数量</div>

                          <div class="switch">
                            <span>包含藏干&nbsp;</span>
                            <el-switch
                              v-model="cangGanWuXingSwitch"
                              size="small"
                              style="--el-switch-on-color: #13ce66"
                            />
                          </div>

                          <div class="divider">
                            <el-divider />
                          </div>

                          <Row>
                            <Col span="24">
                              <div class="progress">
                                <span class="title-p" v-html="wxc('木')"></span>
                                <Progress
                                  :percent="dataWanZheng.muCount * 10"
                                  :stroke-width="20"
                                  :stroke-color="muColor"
                                  class="pro"
                                >
                                  <span class="count"
                                    >{{ dataWanZheng.muCount }}个</span
                                  >
                                </Progress>
                              </div>
                            </Col>
                            <Col span="24">
                              <div class="progress">
                                <span class="title-p" v-html="wxc('火')"></span>
                                <Progress
                                  :percent="dataWanZheng.huoCount * 10"
                                  :stroke-width="20"
                                  :stroke-color="huoColor"
                                  class="pro"
                                >
                                  <span class="count"
                                    >{{ dataWanZheng.huoCount }}个</span
                                  >
                                </Progress>
                              </div>
                            </Col>
                            <Col span="24">
                              <div class="progress">
                                <span class="title-p" v-html="wxc('土')"></span>
                                <Progress
                                  :percent="dataWanZheng.tuCount * 10"
                                  :stroke-width="20"
                                  :stroke-color="tuColor"
                                  class="pro"
                                >
                                  <span class="count"
                                    >{{ dataWanZheng.tuCount }}个</span
                                  >
                                </Progress>
                              </div>
                            </Col>
                            <Col span="24">
                              <div class="progress">
                                <span class="title-p" v-html="wxc('金')"></span>
                                <Progress
                                  :percent="dataWanZheng.jinCount * 10"
                                  :stroke-width="20"
                                  :stroke-color="jinColor"
                                  class="pro"
                                >
                                  <span class="count"
                                    >{{ dataWanZheng.jinCount }}个</span
                                  >
                                </Progress>
                              </div>
                            </Col>
                            <Col span="24">
                              <div class="progress">
                                <span class="title-p" v-html="wxc('水')"></span>
                                <Progress
                                  :percent="dataWanZheng.shuiCount * 10"
                                  :stroke-width="20"
                                  :stroke-color="shuiColor"
                                  class="pro"
                                >
                                  <span class="count"
                                    >{{ dataWanZheng.shuiCount }}个</span
                                  >
                                </Progress>
                              </div>
                            </Col>
                          </Row>
                        </div>
                      </Col>

                      <!-- 数据三 -->
                      <Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <div class="jb3">
                          <el-tabs
                            v-model="caiHuaTab"
                            type="card"
                            stretch="true"
                          >
                            <el-tab-pane label="正财年" name="1">
                              <div
                                v-if="
                                  dataWanZheng.zhengCaiYun &&
                                  dataWanZheng.zhengCaiYun.length
                                "
                                class="oy"
                              >
                                <span
                                  v-for="index in dataWanZheng.zhengCaiYun
                                    .length"
                                  :key="index"
                                >
                                  <div class="jianju">
                                    <span
                                      v-html="
                                        bzc(
                                          dataWanZheng.zhengCaiYun[index - 1][2]
                                        )
                                      "
                                    ></span
                                    >年 ({{
                                      dataWanZheng.zhengCaiYun[index - 1][0]
                                    }}年/{{
                                      dataWanZheng.zhengCaiYun[index - 1][1]
                                    }}岁)
                                  </div>
                                  <span v-if="index % 3 === 0"><br /></span>
                                </span>
                              </div>
                            </el-tab-pane>
                            <el-tab-pane label="偏财年" name="2">
                              <div
                                v-if="
                                  dataWanZheng.pianCaiYun &&
                                  dataWanZheng.pianCaiYun.length
                                "
                                class="oy"
                              >
                                <div
                                  v-for="index in dataWanZheng.pianCaiYun
                                    .length"
                                  :key="index"
                                >
                                  <div class="jianju">
                                    <span
                                      v-html="
                                        bzc(
                                          dataWanZheng.pianCaiYun[index - 1][2]
                                        )
                                      "
                                    ></span
                                    >年 ({{
                                      dataWanZheng.pianCaiYun[index - 1][0]
                                    }}年/{{
                                      dataWanZheng.pianCaiYun[index - 1][1]
                                    }}岁)
                                  </div>
                                  <span v-if="index % 3 === 0"><br /></span>
                                </div>
                              </div>
                            </el-tab-pane>
                            <el-tab-pane label="正桃花年" name="3">
                              <div
                                v-if="
                                  dataWanZheng.zhengTaoHua &&
                                  dataWanZheng.zhengTaoHua.length
                                "
                                class="oy"
                              >
                                <div
                                  v-for="index in dataWanZheng.zhengTaoHua
                                    .length"
                                  :key="index"
                                >
                                  <div class="jianju">
                                    <span
                                      v-html="
                                        bzc(
                                          dataWanZheng.zhengTaoHua[index - 1][2]
                                        )
                                      "
                                    ></span
                                    >年 ({{
                                      dataWanZheng.zhengTaoHua[index - 1][0]
                                    }}年/{{
                                      dataWanZheng.zhengTaoHua[index - 1][1]
                                    }}岁)
                                  </div>
                                  <span v-if="index % 3 === 0"><br /></span>
                                </div>
                              </div>
                            </el-tab-pane>
                            <el-tab-pane label="偏桃花年" name="4">
                              <div
                                v-if="
                                  dataWanZheng.pianTaoHua &&
                                  dataWanZheng.pianTaoHua.length
                                "
                                class="oy"
                              >
                                <span
                                  v-for="index in dataWanZheng.pianTaoHua
                                    .length"
                                  :key="index"
                                >
                                  <div class="jianju">
                                    <span
                                      v-html="
                                        bzc(
                                          dataWanZheng.pianTaoHua[index - 1][2]
                                        )
                                      "
                                    ></span
                                    >年 ({{
                                      dataWanZheng.pianTaoHua[index - 1][0]
                                    }}年/{{
                                      dataWanZheng.pianTaoHua[index - 1][1]
                                    }}岁)
                                  </div>
                                  <span v-if="index % 3 === 0"><br /></span>
                                </span>
                              </div>
                            </el-tab-pane>
                          </el-tabs>
                        </div>
                      </Col>
                    </Row>

                    <!-- 数据四 -->
                    <div class="jb4">
                      <Row>
                        <Col
                          :xs="4"
                          :sm="4"
                          :md="4"
                          :lg="4"
                          :xl="4"
                          class="average ml"
                        >
                          <span
                            v-html="wxwsc(dataWanZheng.wuXingWangShuai[0])"
                          ></span>
                        </Col>
                        <Col
                          :xs="5"
                          :sm="5"
                          :md="5"
                          :lg="4"
                          :xl="4"
                          class="average"
                        >
                          <span
                            v-html="wxwsc(dataWanZheng.wuXingWangShuai[1])"
                          ></span>
                        </Col>
                        <Col
                          :xs="5"
                          :sm="5"
                          :md="5"
                          :lg="4"
                          :xl="4"
                          class="average"
                        >
                          <span
                            v-html="wxwsc(dataWanZheng.wuXingWangShuai[2])"
                          ></span>
                        </Col>
                        <Col
                          :xs="5"
                          :sm="5"
                          :md="5"
                          :lg="4"
                          :xl="4"
                          class="average"
                        >
                          <span
                            v-html="wxwsc(dataWanZheng.wuXingWangShuai[3])"
                          ></span>
                        </Col>
                        <Col
                          :xs="5"
                          :sm="5"
                          :md="5"
                          :lg="4"
                          :xl="4"
                          class="average"
                        >
                          <span
                            v-html="wxwsc(dataWanZheng.wuXingWangShuai[4])"
                          ></span>
                        </Col>
                      </Row>
                    </div>

                    <!-- 数据五 -->
                    <div class="jb5">
                      <Row>
                        <Col span="3" class="tj">
                          <b class="title" @click="ganZhiTuJieMethod(1)">
                            干支图示
                            <Icon type="ios-open-outline" />
                          </b>
                        </Col>
                        <Col span="21">
                          <Row>
                            <Col span="24" class="mb ml">
                              <span class="title">天干关系（四柱）：</span>
                              <span v-if="dataWanZheng.tianGanLiuYi">
                                <span
                                  v-if="dataWanZheng.tianGanLiuYi.length !== 0"
                                  class="sp"
                                >
                                  {{ dataWanZheng.tianGanLiuYi.join("，") }}
                                </span>
                                <span v-else class="null">暂无数据</span>
                              </span>
                            </Col>
                            <Col span="24" class="ml">
                              <span class="title">地支关系（四柱）：</span>
                              <span v-if="dataWanZheng.diZhiLiuYi">
                                <span
                                  v-if="dataWanZheng.diZhiLiuYi.length !== 0"
                                  class="sp"
                                >
                                  {{ dataWanZheng.diZhiLiuYi.join("，") }}
                                </span>
                                <span v-else class="null">暂无数据</span>
                              </span>
                            </Col>
                          </Row>
                        </Col>
                      </Row>
                    </div>
                  </div>

                  <!-- 命盘信息 -->
                  <div class="mingPan" v-show="dataWanZhengPage == 2">
                    <Row v-if="daYunLiuNianDataStatus">
                      <!-- 命盘 -->
                      <Col :xs="24" :sm="24" :md="24" :lg="13" :xl="13">
                        <!-- 命盘模式1（四柱） -->
                        <div class="mp1" v-show="mingPanMode == 1">
                          <Row class="bc0">
                            <Col span="4" class="title">☯</Col>
                            <Col span="5" class="title">年柱</Col>
                            <Col span="5" class="title">月柱</Col>
                            <Col span="5" class="title">日柱</Col>
                            <Col span="5" class="title">时柱</Col>
                          </Row>

                          <Row class="bc2">
                            <Col span="4" class="title">主星</Col>
                            <Col span="5">{{
                              dataWanZheng.yearGanZhiZhuXing
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.monthGanZhiZhuXing
                            }}</Col>
                            <Col span="5"
                              ><b>{{ dataWanZheng.dayGanZhiZhuXing }}</b></Col
                            >
                            <Col span="5">{{
                              dataWanZheng.hourGanZhiZhuXing
                            }}</Col>
                          </Row>

                          <Row class="bc3">
                            <Col span="4" class="title">天干</Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.yearGan)"></b>
                              <span v-html="gzwx(dataWanZheng.yearGan)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.monthGan)"></b>
                              <span v-html="gzwx(dataWanZheng.monthGan)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.dayGan)"></b>
                              <span v-html="gzwx(dataWanZheng.dayGan)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.hourGan)"></b>
                              <span v-html="gzwx(dataWanZheng.hourGan)"></span>
                            </Col>
                          </Row>

                          <Row class="bc4">
                            <Col span="4" class="title">地支</Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.yearZhi)"></b>
                              <span v-html="gzwx(dataWanZheng.yearZhi)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.monthZhi)"></b>
                              <span v-html="gzwx(dataWanZheng.monthZhi)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.dayZhi)"></b>
                              <span v-html="gzwx(dataWanZheng.dayZhi)"></span>
                            </Col>
                            <Col span="5">
                              <b v-html="gzgl(dataWanZheng.hourZhi)"></b>
                              <span v-html="gzwx(dataWanZheng.hourZhi)"></span>
                            </Col>
                          </Row>

                          <Row class="bc5">
                            <Col span="4" class="title2">藏干</Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.yearZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.yearZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.yearZhiCangGan[index - 1])
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.monthZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      dataWanZheng.monthZhiCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      dataWanZheng.monthZhiCangGan[index - 1]
                                    )
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.dayZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.dayZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.dayZhiCangGan[index - 1])
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.hourZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.hourZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.hourZhiCangGan[index - 1])
                                  "
                                ></span
                                ><br />
                              </span>
                            </Col>
                          </Row>

                          <Row class="bc6">
                            <Col span="4" class="title2">副星</Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.yearGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.yearGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.monthGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.monthGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.dayGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.dayGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                            <Col span="5">
                              <span
                                v-for="index in dataWanZheng.hourGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.hourGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </Col>
                          </Row>

                          <Row class="bc1">
                            <Col span="4" class="title">星运</Col>
                            <Col span="5">{{
                              dataWanZheng.yearGanZhiDiShi
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.monthGanZhiDiShi
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.dayGanZhiDiShi
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.hourGanZhiDiShi
                            }}</Col>
                          </Row>

                          <Row class="bc2">
                            <Col span="4" class="title">空亡</Col>
                            <Col span="5">{{
                              dataWanZheng.yearGanZhiKongWang
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.monthGanZhiKongWang
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.dayGanZhiKongWang
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.hourGanZhiKongWang
                            }}</Col>
                          </Row>

                          <Row class="bc1">
                            <Col span="4" class="title">纳音</Col>
                            <Col span="5">{{
                              dataWanZheng.yearGanZhiNaYin
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.monthGanZhiNaYin
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.dayGanZhiNaYin
                            }}</Col>
                            <Col span="5">{{
                              dataWanZheng.hourGanZhiNaYin
                            }}</Col>
                          </Row>

                          <Row class="bc7">
                            <Col span="4" class="title ml">
                              神煞<el-tooltip
                                class="box-item"
                                effect="dark"
                                placement="top"
                              >
                                <template #content>
                                  此处只显示部分常用神煞
                                </template>
                                <Icon type="md-help-circle" />
                              </el-tooltip>
                            </Col>
                            <Col span="5">
                              <div
                                v-if="dataWanZheng.yearGanZhiShenSha"
                                class="ss"
                              >
                                <span
                                  v-if="
                                    dataWanZheng.yearGanZhiShenSha.length === 0
                                  "
                                  >&nbsp;</span
                                >
                                <span
                                  v-else
                                  v-for="index in dataWanZheng.yearGanZhiShenSha
                                    .length"
                                  :key="index"
                                >
                                  <p>
                                    {{
                                      dataWanZheng.yearGanZhiShenSha[index - 1]
                                    }}
                                  </p>
                                </span>
                                <br />
                              </div>
                            </Col>
                            <Col span="5">
                              <div
                                v-if="dataWanZheng.monthGanZhiShenSha"
                                class="ss"
                              >
                                <span
                                  v-if="
                                    dataWanZheng.monthGanZhiShenSha.length === 0
                                  "
                                  >&nbsp;</span
                                >
                                <span
                                  v-else
                                  v-for="index in dataWanZheng
                                    .monthGanZhiShenSha.length"
                                  :key="index"
                                >
                                  <p>
                                    {{
                                      dataWanZheng.monthGanZhiShenSha[index - 1]
                                    }}
                                  </p>
                                </span>
                                <br />
                              </div>
                            </Col>
                            <Col span="5">
                              <div
                                v-if="dataWanZheng.dayGanZhiShenSha"
                                class="ss"
                              >
                                <span
                                  v-if="
                                    dataWanZheng.dayGanZhiShenSha.length === 0
                                  "
                                  >&nbsp;</span
                                >
                                <span
                                  v-else
                                  v-for="index in dataWanZheng.dayGanZhiShenSha
                                    .length"
                                  :key="index"
                                >
                                  <p>
                                    {{
                                      dataWanZheng.dayGanZhiShenSha[index - 1]
                                    }}
                                  </p>
                                </span>
                                <br />
                              </div>
                            </Col>
                            <Col span="5">
                              <div
                                v-if="dataWanZheng.hourGanZhiShenSha"
                                class="ss"
                              >
                                <span
                                  v-if="
                                    dataWanZheng.hourGanZhiShenSha.length === 0
                                  "
                                  >&nbsp;</span
                                >
                                <span
                                  v-else
                                  v-for="index in dataWanZheng.hourGanZhiShenSha
                                    .length"
                                  :key="index"
                                >
                                  <p>
                                    {{
                                      dataWanZheng.hourGanZhiShenSha[index - 1]
                                    }}
                                  </p>
                                </span>
                                <br />
                              </div>
                            </Col>
                          </Row>
                        </div>

                        <!-- 命盘模式2（四柱+大运、流年） -->
                        <div class="mp2" v-show="mingPanMode == 2">
                          <Row class="bc0">
                            <div class="title">☯</div>
                            <div>年柱</div>
                            <div>月柱</div>
                            <div>日柱</div>
                            <div>时柱</div>
                            <div v-show="daYunLun !== 1">
                              <b>大运</b>
                            </div>
                            <div v-show="daYunLun === 1">
                              <b>小运</b>
                            </div>
                            <div><b>流年</b></div>
                          </Row>

                          <Row class="bc2">
                            <div class="title">主星</div>
                            <div>{{ dataWanZheng.yearGanZhiZhuXing }}</div>
                            <div>{{ dataWanZheng.monthGanZhiZhuXing }}</div>
                            <div>
                              <b>{{ dataWanZheng.dayGanZhiZhuXing }}</b>
                            </div>
                            <div>{{ dataWanZheng.hourGanZhiZhuXing }}</div>
                            <div>{{ daYunMingPanData.daYunZhuXing }}</div>
                            <div>{{ liuNianMingPanData.liuNianZhuXing }}</div>
                          </Row>

                          <Row class="bc3">
                            <div class="title">天干</div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.yearGan)"></b>
                              <span v-html="gzwx(dataWanZheng.yearGan)"></span>
                            </div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.monthGan)"></b>
                              <span v-html="gzwx(dataWanZheng.monthGan)"></span>
                            </div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.dayGan)"></b>
                              <span v-html="gzwx(dataWanZheng.dayGan)"></span>
                            </div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.hourGan)"></b>
                              <span v-html="gzwx(dataWanZheng.hourGan)"></span>
                            </div>
                            <div v-if="daYunMingPanData.daYunGanZhi">
                              <b
                                v-html="
                                  gzgl(
                                    daYunMingPanData.daYunGanZhi.substring(0, 1)
                                  )
                                "
                              ></b>
                              <span
                                v-html="
                                  gzwx(
                                    daYunMingPanData.daYunGanZhi.substring(0, 1)
                                  )
                                "
                              ></span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianGanZhi">
                              <b
                                v-html="
                                  gzgl(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      0,
                                      1
                                    )
                                  )
                                "
                              ></b>
                              <span
                                v-html="
                                  gzwx(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      0,
                                      1
                                    )
                                  )
                                "
                              ></span>
                            </div>
                          </Row>

                          <Row class="bc4">
                            <div class="title">地支</div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.yearZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.yearZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.monthZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.monthZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.dayZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.dayZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.hourZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.hourZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div v-if="daYunMingPanData.daYunGanZhi">
                              <strong
                                v-html="
                                  gzgl(
                                    daYunMingPanData.daYunGanZhi.substring(1, 2)
                                  )
                                "
                              ></strong>
                              <span
                                v-html="
                                  gzwx(
                                    daYunMingPanData.daYunGanZhi.substring(1, 2)
                                  )
                                "
                                class="wuxing"
                              ></span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianGanZhi">
                              <strong
                                v-html="
                                  gzgl(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      1,
                                      2
                                    )
                                  )
                                "
                              ></strong>
                              <span
                                v-html="
                                  gzwx(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      1,
                                      2
                                    )
                                  )
                                "
                                class="wuxing"
                              ></span>
                            </div>
                          </Row>

                          <Row class="bc5">
                            <div class="title2">藏干</div>
                            <div v-if="dataWanZheng.yearZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.yearZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.yearZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.yearZhiCangGan[index - 1])
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.monthZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.monthZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      dataWanZheng.monthZhiCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      dataWanZheng.monthZhiCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.dayZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.dayZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.dayZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.dayZhiCangGan[index - 1])
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.hourZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.hourZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.hourZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.hourZhiCangGan[index - 1])
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="daYunMingPanData.daYunCangGan">
                              <span
                                v-for="index in daYunMingPanData.daYunCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      daYunMingPanData.daYunCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      daYunMingPanData.daYunCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianCangGan">
                              <span
                                v-for="index in liuNianMingPanData
                                  .liuNianCangGan.length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      liuNianMingPanData.liuNianCangGan[
                                        index - 1
                                      ]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      liuNianMingPanData.liuNianCangGan[
                                        index - 1
                                      ]
                                    )
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                          </Row>

                          <Row class="bc6">
                            <div class="title2">副星</div>
                            <div v-if="dataWanZheng.yearGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.yearGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.yearGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.monthGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.monthGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.monthGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.dayGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.dayGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.dayGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.hourGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.hourGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.hourGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="daYunMingPanData.daYunFuXing">
                              <span
                                v-for="index in daYunMingPanData.daYunFuXing
                                  .length"
                                :key="index"
                              >
                                {{ daYunMingPanData.daYunFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianFuXing">
                              <span
                                v-for="index in liuNianMingPanData.liuNianFuXing
                                  .length"
                                :key="index"
                              >
                                {{
                                  liuNianMingPanData.liuNianFuXing[index - 1]
                                }}
                                <br />
                              </span>
                            </div>
                          </Row>

                          <Row class="bc1">
                            <div class="title">星运</div>
                            <div>{{ dataWanZheng.yearGanZhiDiShi }}</div>
                            <div>{{ dataWanZheng.monthGanZhiDiShi }}</div>
                            <div>{{ dataWanZheng.dayGanZhiDiShi }}</div>
                            <div>{{ dataWanZheng.hourGanZhiDiShi }}</div>
                            <div>{{ daYunMingPanData.daYunDiShi }}</div>
                            <div>{{ liuNianMingPanData.liuNianDiShi }}</div>
                          </Row>

                          <Row class="bc2">
                            <div class="title">空亡</div>
                            <div>{{ dataWanZheng.yearGanZhiKongWang }}</div>
                            <div>{{ dataWanZheng.monthGanZhiKongWang }}</div>
                            <div>{{ dataWanZheng.dayGanZhiKongWang }}</div>
                            <div>{{ dataWanZheng.hourGanZhiKongWang }}</div>
                            <div>{{ daYunMingPanData.daYunKongWang }}</div>
                            <div>{{ liuNianMingPanData.liuNianKongWang }}</div>
                          </Row>

                          <Row class="bc1">
                            <div class="title">纳音</div>
                            <div>{{ dataWanZheng.yearGanZhiNaYin }}</div>
                            <div>{{ dataWanZheng.monthGanZhiNaYin }}</div>
                            <div>{{ dataWanZheng.dayGanZhiNaYin }}</div>
                            <div>{{ dataWanZheng.hourGanZhiNaYin }}</div>
                            <div>{{ daYunMingPanData.daYunNaYin }}</div>
                            <div>{{ liuNianMingPanData.liuNianNaYin }}</div>
                          </Row>

                          <Row class="bc7">
                            <div class="title ml">
                              神煞<el-tooltip
                                class="box-item"
                                effect="dark"
                                placement="top"
                              >
                                <template #content>
                                  此处只显示部分常用神煞
                                </template>
                                <Icon type="md-help-circle" />
                              </el-tooltip>
                            </div>
                            <div
                              v-if="dataWanZheng.yearGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.yearGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.yearGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    dataWanZheng.yearGanZhiShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="dataWanZheng.monthGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.monthGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.monthGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    dataWanZheng.monthGanZhiShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="dataWanZheng.dayGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.dayGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.dayGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{ dataWanZheng.dayGanZhiShenSha[index - 1] }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="dataWanZheng.hourGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.hourGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.hourGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    dataWanZheng.hourGanZhiShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="daYunMingPanData.daYunShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  daYunMingPanData.daYunShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in daYunMingPanData.daYunShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{ daYunMingPanData.daYunShenSha[index - 1] }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="liuNianMingPanData.liuNianShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  liuNianMingPanData.liuNianShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in liuNianMingPanData
                                  .liuNianShenSha.length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    liuNianMingPanData.liuNianShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                          </Row>
                        </div>

                        <!-- 命盘模式3（四柱+大运、流年、流月） -->
                        <div class="mp3" v-show="mingPanMode == 3">
                          <Row class="bc0">
                            <div class="title">☯</div>
                            <div>年柱</div>
                            <div>月柱</div>
                            <div>日柱</div>
                            <div>时柱</div>
                            <div v-show="daYunLun !== 1">
                              <b>大运</b>
                            </div>
                            <div v-show="daYunLun === 1">
                              <b>小运</b>
                            </div>
                            <div><b>流年</b></div>
                            <div><b>流月</b></div>
                          </Row>

                          <Row class="bc2">
                            <div class="title">主星</div>
                            <div>{{ dataWanZheng.yearGanZhiZhuXing }}</div>
                            <div>{{ dataWanZheng.monthGanZhiZhuXing }}</div>
                            <div>
                              <b>{{ dataWanZheng.dayGanZhiZhuXing }}</b>
                            </div>
                            <div>{{ dataWanZheng.hourGanZhiZhuXing }}</div>
                            <div>{{ daYunMingPanData.daYunZhuXing }}</div>
                            <div>{{ liuNianMingPanData.liuNianZhuXing }}</div>
                            <div>{{ liuYueMingPanData.liuYueZhuXing }}</div>
                          </Row>

                          <Row class="bc3">
                            <div class="title">天干</div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.yearGan)"></b>
                              <span v-html="gzwx(dataWanZheng.yearGan)"></span>
                            </div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.monthGan)"></b>
                              <span v-html="gzwx(dataWanZheng.monthGan)"></span>
                            </div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.dayGan)"></b>
                              <span v-html="gzwx(dataWanZheng.dayGan)"></span>
                            </div>
                            <div>
                              <b v-html="gzgl(dataWanZheng.hourGan)"></b>
                              <span v-html="gzwx(dataWanZheng.hourGan)"></span>
                            </div>
                            <div v-if="daYunMingPanData.daYunGanZhi">
                              <b
                                v-html="
                                  gzgl(
                                    daYunMingPanData.daYunGanZhi.substring(0, 1)
                                  )
                                "
                              ></b>
                              <span
                                v-html="
                                  gzwx(
                                    daYunMingPanData.daYunGanZhi.substring(0, 1)
                                  )
                                "
                              ></span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianGanZhi">
                              <b
                                v-html="
                                  gzgl(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      0,
                                      1
                                    )
                                  )
                                "
                              ></b>
                              <span
                                v-html="
                                  gzwx(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      0,
                                      1
                                    )
                                  )
                                "
                              ></span>
                            </div>
                            <div v-if="liuYueMingPanData.liuYueGanZhi">
                              <b
                                v-html="
                                  gzgl(
                                    liuYueMingPanData.liuYueGanZhi.substring(
                                      0,
                                      1
                                    )
                                  )
                                "
                              ></b>
                              <span
                                v-html="
                                  gzwx(
                                    liuYueMingPanData.liuYueGanZhi.substring(
                                      0,
                                      1
                                    )
                                  )
                                "
                              ></span>
                            </div>
                          </Row>

                          <Row class="bc4">
                            <div class="title">地支</div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.yearZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.yearZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.monthZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.monthZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.dayZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.dayZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div>
                              <strong
                                v-html="gzgl(dataWanZheng.hourZhi)"
                              ></strong>
                              <span
                                v-html="gzwx(dataWanZheng.hourZhi)"
                                class="wuxing"
                              ></span>
                            </div>
                            <div v-if="daYunMingPanData.daYunGanZhi">
                              <strong
                                v-html="
                                  gzgl(
                                    daYunMingPanData.daYunGanZhi.substring(1, 2)
                                  )
                                "
                              ></strong>
                              <span
                                v-html="
                                  gzwx(
                                    daYunMingPanData.daYunGanZhi.substring(1, 2)
                                  )
                                "
                                class="wuxing"
                              ></span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianGanZhi">
                              <strong
                                v-html="
                                  gzgl(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      1,
                                      2
                                    )
                                  )
                                "
                              ></strong>
                              <span
                                v-html="
                                  gzwx(
                                    liuNianMingPanData.liuNianGanZhi.substring(
                                      1,
                                      2
                                    )
                                  )
                                "
                                class="wuxing"
                              ></span>
                            </div>
                            <div v-if="liuYueMingPanData.liuYueGanZhi">
                              <strong
                                v-html="
                                  gzgl(
                                    liuYueMingPanData.liuYueGanZhi.substring(
                                      1,
                                      2
                                    )
                                  )
                                "
                              ></strong>
                              <span
                                v-html="
                                  gzwx(
                                    liuYueMingPanData.liuYueGanZhi.substring(
                                      1,
                                      2
                                    )
                                  )
                                "
                                class="wuxing"
                              ></span>
                            </div>
                          </Row>

                          <Row class="bc5">
                            <div class="title2">藏干</div>
                            <div v-if="dataWanZheng.yearZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.yearZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.yearZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.yearZhiCangGan[index - 1])
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.monthZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.monthZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      dataWanZheng.monthZhiCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      dataWanZheng.monthZhiCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.dayZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.dayZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.dayZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.dayZhiCangGan[index - 1])
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.hourZhiCangGan">
                              <span
                                v-for="index in dataWanZheng.hourZhiCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(dataWanZheng.hourZhiCangGan[index - 1])
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(dataWanZheng.hourZhiCangGan[index - 1])
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="daYunMingPanData.daYunCangGan">
                              <span
                                v-for="index in daYunMingPanData.daYunCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      daYunMingPanData.daYunCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      daYunMingPanData.daYunCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianCangGan">
                              <span
                                v-for="index in liuNianMingPanData
                                  .liuNianCangGan.length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      liuNianMingPanData.liuNianCangGan[
                                        index - 1
                                      ]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      liuNianMingPanData.liuNianCangGan[
                                        index - 1
                                      ]
                                    )
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                            <div v-if="liuYueMingPanData.liuYueCangGan">
                              <span
                                v-for="index in liuYueMingPanData.liuYueCangGan
                                  .length"
                                :key="index"
                              >
                                <span
                                  v-html="
                                    cggl(
                                      liuYueMingPanData.liuYueCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <span
                                  v-html="
                                    gzwx(
                                      liuYueMingPanData.liuYueCangGan[index - 1]
                                    )
                                  "
                                ></span>
                                <br />
                              </span>
                            </div>
                          </Row>

                          <Row class="bc6">
                            <div class="title2">副星</div>
                            <div v-if="dataWanZheng.yearGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.yearGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.yearGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.monthGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.monthGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.monthGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.dayGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.dayGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.dayGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="dataWanZheng.hourGanZhiFuXing">
                              <span
                                v-for="index in dataWanZheng.hourGanZhiFuXing
                                  .length"
                                :key="index"
                              >
                                {{ dataWanZheng.hourGanZhiFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="daYunMingPanData.daYunFuXing">
                              <span
                                v-for="index in daYunMingPanData.daYunFuXing
                                  .length"
                                :key="index"
                              >
                                {{ daYunMingPanData.daYunFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                            <div v-if="liuNianMingPanData.liuNianFuXing">
                              <span
                                v-for="index in liuNianMingPanData.liuNianFuXing
                                  .length"
                                :key="index"
                              >
                                {{
                                  liuNianMingPanData.liuNianFuXing[index - 1]
                                }}
                                <br />
                              </span>
                            </div>
                            <div v-if="liuYueMingPanData.liuYueFuXing">
                              <span
                                v-for="index in liuYueMingPanData.liuYueFuXing
                                  .length"
                                :key="index"
                              >
                                {{ liuYueMingPanData.liuYueFuXing[index - 1] }}
                                <br />
                              </span>
                            </div>
                          </Row>

                          <Row class="bc1">
                            <div class="title">星运</div>
                            <div>{{ dataWanZheng.yearGanZhiDiShi }}</div>
                            <div>{{ dataWanZheng.monthGanZhiDiShi }}</div>
                            <div>{{ dataWanZheng.dayGanZhiDiShi }}</div>
                            <div>{{ dataWanZheng.hourGanZhiDiShi }}</div>
                            <div>{{ daYunMingPanData.daYunDiShi }}</div>
                            <div>{{ liuNianMingPanData.liuNianDiShi }}</div>
                            <div>{{ liuYueMingPanData.liuYueDiShi }}</div>
                          </Row>

                          <Row class="bc2">
                            <div class="title">空亡</div>
                            <div>{{ dataWanZheng.yearGanZhiKongWang }}</div>
                            <div>{{ dataWanZheng.monthGanZhiKongWang }}</div>
                            <div>{{ dataWanZheng.dayGanZhiKongWang }}</div>
                            <div>{{ dataWanZheng.hourGanZhiKongWang }}</div>
                            <div>{{ daYunMingPanData.daYunKongWang }}</div>
                            <div>{{ liuNianMingPanData.liuNianKongWang }}</div>
                            <div>{{ liuYueMingPanData.liuYueKongWang }}</div>
                          </Row>

                          <Row class="bc1">
                            <div class="title">纳音</div>
                            <div>{{ dataWanZheng.yearGanZhiNaYin }}</div>
                            <div>{{ dataWanZheng.monthGanZhiNaYin }}</div>
                            <div>{{ dataWanZheng.dayGanZhiNaYin }}</div>
                            <div>{{ dataWanZheng.hourGanZhiNaYin }}</div>
                            <div>{{ daYunMingPanData.daYunNaYin }}</div>
                            <div>{{ liuNianMingPanData.liuNianNaYin }}</div>
                            <div>{{ liuYueMingPanData.liuYueNaYin }}</div>
                          </Row>

                          <Row class="bc7">
                            <div class="title ml">
                              神煞<el-tooltip
                                class="box-item"
                                effect="dark"
                                placement="top"
                              >
                                <template #content>
                                  此处只显示部分常用神煞
                                </template>
                                <Icon type="md-help-circle" />
                              </el-tooltip>
                            </div>
                            <div
                              v-if="dataWanZheng.yearGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.yearGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.yearGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    dataWanZheng.yearGanZhiShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="dataWanZheng.monthGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.monthGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.monthGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    dataWanZheng.monthGanZhiShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="dataWanZheng.dayGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.dayGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.dayGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{ dataWanZheng.dayGanZhiShenSha[index - 1] }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="dataWanZheng.hourGanZhiShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  dataWanZheng.hourGanZhiShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in dataWanZheng.hourGanZhiShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    dataWanZheng.hourGanZhiShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="daYunMingPanData.daYunShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  daYunMingPanData.daYunShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in daYunMingPanData.daYunShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{ daYunMingPanData.daYunShenSha[index - 1] }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="liuNianMingPanData.liuNianShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  liuNianMingPanData.liuNianShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in liuNianMingPanData
                                  .liuNianShenSha.length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    liuNianMingPanData.liuNianShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                            <div
                              v-if="liuYueMingPanData.liuYueShenSha"
                              class="ss"
                            >
                              <span
                                v-if="
                                  liuYueMingPanData.liuYueShenSha.length === 0
                                "
                                >&nbsp;</span
                              >
                              <span
                                v-else
                                v-for="index in liuYueMingPanData.liuYueShenSha
                                  .length"
                                :key="index"
                              >
                                <p>
                                  {{
                                    liuYueMingPanData.liuYueShenSha[index - 1]
                                  }}
                                </p>
                              </span>
                              <br />
                            </div>
                          </Row>
                        </div>
                      </Col>

                      <!-- 大运流年、五行旺衰、干支关系 -->
                      <Col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
                        <div class="dyln">
                          <!-- 起运数据 -->
                          <div class="qy">
                            <span class="title">起运：</span
                            >{{ dataWanZheng.qiYun }}<br />
                            <span class="title">起运日期：</span
                            >{{ dataWanZheng.qiYunDate }}
                            <div class="mingPanMode">
                              <el-segmented
                                class="segmented"
                                v-model="mingPanModeStr"
                                :options="mingPanModeOptions"
                              />
                            </div>
                          </div>

                          <!-- 大运 -->
                          <div class="dy" v-if="daYunData">
                            <div class="title">
                              <b>大<br />运</b>
                            </div>
                            <el-card shadow="never" class="dy-card">
                              <div class="dy-d">
                                <div
                                  v-for="index in 10"
                                  :key="index"
                                  class="bd-l"
                                >
                                  <span v-if="daYunLun === index">
                                    <div class="div-yes size">
                                      <span v-if="index === 1">
                                        <b
                                          v-if="
                                            daYunData[0][1] !== daYunData[1][1]
                                          "
                                        >
                                          1~{{
                                            parseInt(daYunData[1][1]) - 1
                                          }}岁
                                        </b>
                                        <b v-else>
                                          {{ daYunData[index - 1][1] }}岁
                                        </b>
                                      </span>
                                      <span v-else>
                                        <b> {{ daYunData[index - 1][1] }}岁 </b>
                                      </span>
                                    </div>
                                    <div class="div-yes size">
                                      <b> {{ daYunData[index - 1][0] }} </b>
                                    </div>
                                    <span v-if="index === 1">
                                      <!-- <b>
                                    <div class="div-yes2">小<br />运</div>
                                  </b> -->
                                      <b class="xiaoYun">小运</b>
                                      <b>
                                        <div class="div-no shiShen1">
                                          {{ xiaoYunDataFirst[0][3] }}
                                        </div>
                                      </b>
                                      <b>
                                        <div class="div-no shiShen2">
                                          {{ xiaoYunDataFirst[0][4] }}
                                        </div>
                                      </b>
                                    </span>
                                    <span v-else>
                                      <b>
                                        <div
                                          class="div-yes"
                                          v-html="bzc(daYunData[index - 1][2])"
                                        ></div>
                                      </b>
                                      <b>
                                        <div class="div-yes shiShen1">
                                          {{ daYunData[index - 1][3] }}
                                        </div>
                                      </b>
                                      <b>
                                        <div class="div-yes shiShen2">
                                          {{ daYunData[index - 1][4] }}
                                        </div>
                                      </b>
                                    </span>
                                  </span>

                                  <span
                                    v-else
                                    @click="
                                      daYunQieHuanMethod(
                                        index,
                                        daYunData[index - 1][2]
                                      )
                                    "
                                  >
                                    <div class="div-no size">
                                      <span v-if="index === 1">
                                        <span
                                          v-if="
                                            daYunData[0][1] !== daYunData[1][1]
                                          "
                                        >
                                          1~{{
                                            parseInt(daYunData[1][1]) - 1
                                          }}岁
                                        </span>
                                        <span v-else
                                          >{{ daYunData[index - 1][1] }}岁</span
                                        >
                                      </span>
                                      <span v-else>
                                        {{ daYunData[index - 1][1] }}岁</span
                                      >
                                    </div>
                                    <div class="div-no size">
                                      {{ daYunData[index - 1][0] }}
                                    </div>
                                    <span v-if="index === 1">
                                      <!-- <b>
                                    <div class="div-no2">小<br />运</div>
                                  </b> -->
                                      <b class="xiaoYun">小运</b>
                                      <div class="div-no shiShen1">
                                        {{ xiaoYunDataFirst[0][3] }}
                                      </div>
                                      <div class="div-no shiShen2">
                                        {{ xiaoYunDataFirst[0][4] }}
                                      </div>
                                    </span>
                                    <span v-else>
                                      <div
                                        class="div-no"
                                        v-html="bzc(daYunData[index - 1][2])"
                                      ></div>
                                      <div class="div-no shiShen1">
                                        {{ daYunData[index - 1][3] }}
                                      </div>
                                      <div class="div-no shiShen2">
                                        {{ daYunData[index - 1][4] }}
                                      </div>
                                    </span>
                                  </span>
                                </div>
                              </div>
                            </el-card>
                          </div>

                          <!-- 流年 -->
                          <div class="ln" v-if="liuNianData">
                            <div class="title">
                              <b>流<br />年</b>
                            </div>
                            <div
                              v-for="index in liuNianData.length"
                              :key="index"
                              class="bd-l"
                            >
                              <span v-if="liuNianXiaoYunLun === index">
                                <div class="div-yes size">
                                  <b>{{ liuNianData[index - 1][1] }}岁</b>
                                </div>
                                <div class="div-yes size">
                                  <b>{{ liuNianData[index - 1][0] }}</b>
                                </div>
                                <b>
                                  <div
                                    class="div-yes"
                                    v-html="bzc(liuNianData[index - 1][2])"
                                  ></div>
                                </b>
                                <b>
                                  <div class="div-yes shiShen1">
                                    {{ liuNianData[index - 1][3] }}
                                  </div>
                                </b>
                                <b>
                                  <div class="div-yes shiShen2">
                                    {{ liuNianData[index - 1][4] }}
                                  </div>
                                </b>
                              </span>
                              <span
                                v-else
                                @click="
                                  liuNianXiaoYunQieHuanMethod(
                                    index,
                                    liuNianData[index - 1][0],
                                    liuNianData[index - 1][2]
                                  )
                                "
                              >
                                <div class="div-no size">
                                  {{ liuNianData[index - 1][1] }}岁
                                </div>
                                <div class="div-no size">
                                  {{ liuNianData[index - 1][0] }}
                                </div>
                                <div
                                  class="div-no"
                                  v-html="bzc(liuNianData[index - 1][2])"
                                ></div>
                                <div class="div-no shiShen1">
                                  {{ liuNianData[index - 1][3] }}
                                </div>
                                <div class="div-no shiShen2">
                                  {{ liuNianData[index - 1][4] }}
                                </div>
                              </span>
                            </div>
                          </div>

                          <!-- 流年 - 空 -->
                          <div class="ln" v-else>
                            <div class="title">
                              <b>流<br />年</b>
                            </div>
                            <div v-for="index in 10" :key="index" class="bd-l">
                              <div class="null">- -</div>
                            </div>
                          </div>

                          <!-- 小运 -->
                          <div class="xy" v-if="xiaoYunData">
                            <div class="title">
                              <b> 小<br />运 </b>
                            </div>
                            <div
                              v-for="index in xiaoYunData.length"
                              :key="index"
                              class="bd-l"
                            >
                              <span v-if="xiaoYunData.length !== 0">
                                <span v-if="liuNianXiaoYunLun === index">
                                  <b>
                                    <div
                                      class="div-yes"
                                      v-html="bzc(xiaoYunData[index - 1][2])"
                                    ></div>
                                  </b>
                                  <b>
                                    <div class="div-yes shiShen1">
                                      {{ xiaoYunData[index - 1][3] }}
                                    </div>
                                  </b>
                                  <b>
                                    <div class="div-yes shiShen2">
                                      {{ xiaoYunData[index - 1][4] }}
                                    </div>
                                  </b>
                                </span>
                                <span
                                  v-else
                                  @click="
                                    liuNianXiaoYunQieHuanMethod(
                                      index,
                                      liuNianData[index - 1][0],
                                      liuNianData[index - 1][2]
                                    )
                                  "
                                >
                                  <div
                                    class="div-no"
                                    v-html="bzc(xiaoYunData[index - 1][2])"
                                  ></div>
                                  <div class="div-no shiShen1">
                                    {{ xiaoYunData[index - 1][3] }}
                                  </div>
                                  <div class="div-no shiShen2">
                                    {{ xiaoYunData[index - 1][4] }}
                                  </div>
                                </span>
                              </span>
                              <span v-else>
                                <div class="div"></div>
                                <div class="div"></div>
                                <div class="div"></div>
                              </span>
                            </div>
                          </div>

                          <!-- 小运 - 空 -->
                          <div class="xy" v-else>
                            <div class="title">
                              <b>小<br />运</b>
                            </div>
                            <div v-for="index in 10" :key="index" class="bd-l">
                              <div class="null">- -</div>
                            </div>
                          </div>

                          <!-- 流月 -->
                          <div class="ly" v-if="liuYueData">
                            <div class="title">
                              <b>流<br />月</b>
                            </div>
                            <div
                              v-for="index in liuYueData.length"
                              :key="index"
                              class="bd-l"
                            >
                              <span v-if="liuYueLun === index">
                                <div class="div-yes">
                                  <b>{{ liuYueData[index - 1][1] }}</b>
                                </div>
                                <b>
                                  <div
                                    class="div-yes"
                                    v-html="bzc(liuYueData[index - 1][2])"
                                  ></div>
                                </b>
                                <b>
                                  <div class="div-yes shiShen3">
                                    {{ liuYueData[index - 1][3] }}
                                  </div>
                                </b>
                                <b>
                                  <div class="div-yes shiShen3">
                                    {{ liuYueData[index - 1][4] }}
                                  </div>
                                </b>
                              </span>
                              <span
                                v-else
                                @click="
                                  liuYueQieHuanMethod(
                                    index,
                                    liuYueData[index - 1][0],
                                    liuYueData[index - 1][2]
                                  )
                                "
                              >
                                <div class="div-no">
                                  {{ liuYueData[index - 1][1] }}
                                </div>
                                <div
                                  class="div-no"
                                  v-html="bzc(liuYueData[index - 1][2])"
                                ></div>
                                <div class="div-no shiShen3">
                                  {{ liuYueData[index - 1][3] }}
                                </div>
                                <div class="div-no shiShen3">
                                  {{ liuYueData[index - 1][4] }}
                                </div>
                              </span>
                            </div>
                          </div>

                          <!-- 五行旺衰 -->
                          <div class="wxws">
                            <Row>
                              <Col span="4" class="average ml">
                                <span
                                  v-html="
                                    wxwsc(dataWanZheng.wuXingWangShuai[0])
                                  "
                                ></span>
                              </Col>
                              <Col span="4" class="average">
                                <span
                                  v-html="
                                    wxwsc(dataWanZheng.wuXingWangShuai[1])
                                  "
                                ></span>
                              </Col>
                              <Col span="4" class="average">
                                <span
                                  v-html="
                                    wxwsc(dataWanZheng.wuXingWangShuai[2])
                                  "
                                ></span>
                              </Col>
                              <Col span="4" class="average">
                                <span
                                  v-html="
                                    wxwsc(dataWanZheng.wuXingWangShuai[3])
                                  "
                                ></span>
                              </Col>
                              <Col span="4" class="average">
                                <span
                                  v-html="
                                    wxwsc(dataWanZheng.wuXingWangShuai[4])
                                  "
                                ></span>
                              </Col>
                            </Row>
                          </div>

                          <!-- 干支关系 -->
                          <div class="gzgx">
                            <!-- 干支关系1（四柱） -->
                            <span v-show="mingPanMode == 1">
                              <Row>
                                <Col span="24" class="mb ml">
                                  <span
                                    class="title"
                                    @click="ganZhiTuJieMethod(1)"
                                  >
                                    天干关系：
                                  </span>
                                  <span v-if="dataWanZheng.tianGanLiuYi">
                                    <span
                                      v-if="
                                        dataWanZheng.tianGanLiuYi.length !== 0
                                      "
                                      class="sp"
                                    >
                                      {{ dataWanZheng.tianGanLiuYi.join("，") }}
                                    </span>
                                    <span v-else class="null">暂无数据</span>
                                  </span>
                                </Col>
                                <Col span="24" class="ml">
                                  <span
                                    class="title"
                                    @click="ganZhiTuJieMethod(1)"
                                  >
                                    地支关系：
                                  </span>
                                  <span v-if="dataWanZheng.diZhiLiuYi">
                                    <span
                                      v-if="
                                        dataWanZheng.diZhiLiuYi.length !== 0
                                      "
                                      class="sp"
                                    >
                                      {{ dataWanZheng.diZhiLiuYi.join("，") }}
                                    </span>
                                    <span v-else class="null">暂无数据</span>
                                  </span>
                                </Col>
                              </Row>
                            </span>

                            <!-- 干支关系2（四柱+大运、流年） -->
                            <span v-show="mingPanMode == 2">
                              <Row>
                                <Col span="24" class="mb ml">
                                  <span
                                    class="title"
                                    @click="ganZhiTuJieMethod(2)"
                                  >
                                    天干关系：
                                  </span>
                                  <span v-if="yunNianTianGanLiuYi">
                                    <span
                                      v-if="yunNianTianGanLiuYi.length !== 0"
                                      class="sp"
                                    >
                                      {{ yunNianTianGanLiuYi.join("，") }}
                                    </span>
                                    <span v-else class="null">暂无数据</span>
                                  </span>
                                </Col>
                                <Col span="24" class="ml">
                                  <span
                                    class="title"
                                    @click="ganZhiTuJieMethod(2)"
                                  >
                                    地支关系：
                                  </span>
                                  <span v-if="yunNianDiZhiLiuYi">
                                    <span
                                      v-if="yunNianDiZhiLiuYi.length !== 0"
                                      class="sp"
                                    >
                                      {{ yunNianDiZhiLiuYi.join("，") }}
                                    </span>
                                    <span v-else class="null">暂无数据</span>
                                  </span>
                                </Col>
                              </Row>
                            </span>

                            <!-- 干支关系3（四柱+大运、流年、流月） -->
                            <span v-show="mingPanMode == 3">
                              <Row>
                                <Col span="24" class="mb ml">
                                  <span
                                    class="title"
                                    @click="ganZhiTuJieMethod(3)"
                                  >
                                    天干关系：
                                  </span>
                                  <span v-if="yunNianYueTianGanLiuYi">
                                    <span
                                      v-if="yunNianYueTianGanLiuYi.length !== 0"
                                      class="sp"
                                    >
                                      {{ yunNianYueTianGanLiuYi.join("，") }}
                                    </span>
                                    <span v-else class="null">暂无数据</span>
                                  </span>
                                </Col>
                                <Col span="24" class="ml">
                                  <span
                                    class="title"
                                    @click="ganZhiTuJieMethod(3)"
                                  >
                                    地支关系：
                                  </span>
                                  <span v-if="yunNianYueDiZhiLiuYi">
                                    <span
                                      v-if="yunNianYueDiZhiLiuYi.length !== 0"
                                      class="sp"
                                    >
                                      {{ yunNianYueDiZhiLiuYi.join("，") }}
                                    </span>
                                    <span v-else class="null">暂无数据</span>
                                  </span>
                                </Col>
                              </Row>
                            </span>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </div>

                  <!-- 其他信息 -->
                  <div class="qiTa" v-show="dataWanZhengPage === 3">
                    <!-- 彭祖百忌 -->
                    <el-card class="pzbj" shadow="never">
                      <template #header>
                        <div class="header2">彭祖百忌</div>
                      </template>
                      <div>
                        <span class="title">参考</span>
                        <span>{{ dataWanZheng.pengZuBaiJi }}</span>
                      </div>
                    </el-card>

                    <!-- 日柱论命 -->
                    <el-card class="rzlm" shadow="never">
                      <template #header>
                        <div class="header2">日柱论命</div>
                      </template>
                      <div>
                        <span class="title">参考</span>
                        <span>{{ dataWanZheng.dayZhuLunMing }}</span>
                      </div>
                    </el-card>

                    <!-- 运势分析 -->
                    <el-card class="yyfx" shadow="never">
                      <template #header>
                        <div class="header2">运势分析</div>
                      </template>
                      <div>
                        <span class="title">参考</span>
                        <span>{{ dataWanZheng.yunShiFenXi }}</span>
                      </div>
                    </el-card>

                    <!-- 五行分析 -->
                    <el-card class="wxfx" shadow="never">
                      <template #header>
                        <div class="header2">五行分析</div>
                      </template>
                      <div>
                        <span class="title">参考</span>
                        <span class="item">{{ dataWanZheng.wuXingFenXi }}</span>
                      </div>
                    </el-card>

                    <!-- 性格分析 -->
                    <el-card class="yyfx" shadow="never">
                      <template #header>
                        <div class="header2">性格分析</div>
                      </template>
                      <div>
                        <span class="title">先天性格参考</span>
                        <span>{{ dataWanZheng.xianTianXingGeFenXi }}</span>
                      </div>
                      <div class="mt">
                        <span class="title">潜在性格参考</span>
                        <span>{{ dataWanZheng.qianZaiXingGeFenXi }}</span>
                      </div>
                      <div class="mt">
                        <span class="title">外显性格参考</span>
                        <span>{{ dataWanZheng.waiXianXingGeFenXi }}</span>
                      </div>
                    </el-card>

                    <!-- 骨重 -->
                    <el-card class="gz" shadow="never">
                      <template #header>
                        <div class="header2">袁天罡称骨</div>
                      </template>
                      <div>
                        <span class="title">骨重</span>
                        <b class="item">{{ dataWanZheng.guZhong }}</b>
                      </div>
                      <div class="mt">
                        <span class="title">批注</span>
                        <span>{{ dataWanZheng.guZhongPiZhu }}</span>
                      </div>
                    </el-card>

                    <!-- 星宿 -->
                    <el-card class="xx" shadow="never">
                      <template #header>
                        <div class="header2">星宿</div>
                      </template>
                      <div>
                        <span class="title">星宿</span>
                        <b class="item">
                          {{ dataWanZheng.xingXiu }}（{{
                            dataWanZheng.xiuJiXiong
                          }}）
                        </b>
                      </div>
                      <div class="mt">
                        <span class="title">歌诀</span>
                        <span class="mt">{{
                          dataWanZheng.xiuJiXiongGeJue
                        }}</span>
                      </div>
                    </el-card>

                    <!-- 命卦 -->
                    <el-card class="mg" shadow="never">
                      <template #header>
                        <div class="header2">命卦</div>
                      </template>
                      <div>
                        <span class="title">命卦</span>
                        <b class="item">
                          {{ dataWanZheng.mingGua }}
                        </b>
                      </div>
                      <div class="mt">
                        <span class="title">基本参考</span>
                        <span class="mt">{{ dataWanZheng.mingGuaJiBen }}</span>
                      </div>
                      <div class="mt">
                        <span class="title">风水参考</span>
                        <span class="mt">{{
                          dataWanZheng.mingGuaFengShui
                        }}</span>
                      </div>
                    </el-card>
                  </div>
                </div>
              </div>
            </el-card>
          </Col>

          <!-- 2.2、完整数据加载框架 -->
          <Col span="24" v-if="!dataWanZhengStatus">
            <el-card shadow="never" class="wz-card2">
              <Skeleton
                loading
                animated
                :title="false"
                :paragraph="{
                  rows: 15,
                  width: [
                    '70%',
                    '65%',
                    '70%',
                    '70%',
                    '80%',
                    '75%',
                    '80%',
                    '80%',
                    '90%',
                    '90%',
                    '70%',
                    '100%',
                    '80%',
                    '85%',
                    '100%',
                  ],
                }"
              />
            </el-card>
          </Col>
        </Row>
      </div>

      <!-- ********************************************************************************************************************* -->

      <!-- 更多选项弹窗 -->
      <Modal
        v-model="moreOptionsModal"
        class="moreOptionsModal"
        :styles="{ top: '30px', minWidth: dialog }"
      >
        <template #header>
          <b class="header">
            <Icon type="ios-settings" />
            更多选项
          </b>
        </template>

        <Tabs size="small" class="tabs">
          <TabPane label="四柱选项" class="siZhu">
            <div>
              年柱（年干支）排法：
              <Select transfer v-model="yearGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option
                  v-for="item in yearGanZhiSetOptions"
                  :label="item.label"
                  :value="item.value"
                >
                  {{ item.label }}
                  <span
                    v-if="item.value === 1"
                    style="float: right; color: #8492a6; font-size: 12px"
                  >
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="yearGanZhiSet !== 1" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

            <div class="mt">
              月柱（月干支）排法：
              <Select transfer v-model="monthGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option
                  v-for="item in monthGanZhiSetOptions"
                  :label="item.label"
                  :value="item.value"
                >
                  {{ item.label }}
                  <span
                    v-if="item.value === 1"
                    style="float: right; color: #8492a6; font-size: 12px"
                  >
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="monthGanZhiSet !== 1" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

            <div class="mt">
              日柱（日干支）排法：
              <Select transfer v-model="dayGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option
                  v-for="item in dayGanZhiSetOptions"
                  :label="item.label"
                  :value="item.value"
                >
                  {{ item.label }}
                  <span
                    v-if="item.value === 0"
                    style="float: right; color: #8492a6; font-size: 12px"
                  >
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="dayGanZhiSet !== 0" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

            <div class="mt">
              时柱（时干支）排法：
              <Select transfer v-model="hourGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option
                  v-for="item in hourGanZhiSetOptions"
                  :label="item.label"
                  :value="item.value"
                >
                  {{ item.label }}
                  <span
                    v-if="item.value === 0"
                    style="float: right; color: #8492a6; font-size: 12px"
                  >
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="hourGanZhiSet !== 0" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>
          </TabPane>

          <TabPane label="通用选项" class="tongYong">
            <div class="renYuan">
              人元司令分野类型：
              <Select transfer v-model="renYuanType" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option
                  v-for="item in renYuanTypeOptions"
                  :label="item.label"
                  :value="item.value"
                >
                  {{ item.label }}
                  <span
                    v-if="item.value === 0"
                    style="float: right; color: #8492a6; font-size: 12px"
                  >
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span class="ck" @click="renYuanCanKaoModal = true">
                参考
                <Icon type="ios-open-outline" />
              </span>
              <span v-if="renYuanType !== 0" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>
          </TabPane>
        </Tabs>

        <template #footer>
          <Button long @click="moreOptionsModal = false" class="footer"
            >确认</Button
          >
        </template>
      </Modal>

      <!-- 四柱转日期弹窗 -->
      <Modal
        v-model="siZhuToDateModal"
        class="siZhuToDateModal"
        :styles="{ top: '30px', minWidth: dialog }"
      >
        <template #header>
          <b class="header">
            <Icon type="ios-apps" />
            四柱转日期
          </b>
        </template>

        <div v-if="siZhuToDateTotal === 0" class="siZhu">
          <div class="beginYear">
            年份查询范围：
            <InputNumber
              :max="new Date().getFullYear()"
              :min="100"
              v-model="beginYear"
              class="input"
            />

            <!-- <input placeholder="请输入起始年份" v-model="beginYear" class="beginYear" maxlength="4"
              oninput="value=value.replace(/[^\d]/g,'')" /> -->

            年 ~ 至今
            <a @click="beginYear = 1900" class="res">
              <Icon type="md-refresh" />
              重置
            </a>
          </div>

          <div>
            年柱（年干支）：
            <Select transfer v-model="yearGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option
                v-for="item in ganZhiOptions"
                :label="item.label"
                :value="item.value"
              >
                {{ item.label }}
                <span
                  v-if="item.label === yearGanZhiBackups"
                  style="float: right; color: #8492a6; font-size: 12px"
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </Option>
            </Select>
            <span v-if="yearGanZhi !== yearGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻年柱
            </span>
          </div>

          <div class="mt">
            月柱（月干支）：
            <Select transfer v-model="monthGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option
                v-for="item in ganZhiOptions"
                :label="item.label"
                :value="item.value"
              >
                {{ item.label }}
                <span
                  v-if="item.label === monthGanZhiBackups"
                  style="float: right; color: #8492a6; font-size: 12px"
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </Option>
            </Select>
            <span v-if="monthGanZhi !== monthGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻月柱
            </span>
          </div>

          <div class="mt">
            日柱（日干支）：
            <Select transfer v-model="dayGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option
                v-for="item in ganZhiOptions"
                :label="item.label"
                :value="item.value"
              >
                {{ item.label }}
                <span
                  v-if="item.label === dayGanZhiBackups"
                  style="float: right; color: #8492a6; font-size: 12px"
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </Option>
            </Select>
            <span v-if="dayGanZhi !== dayGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻日柱
            </span>
          </div>

          <div class="mt">
            时柱（时干支）：
            <Select transfer v-model="hourGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option
                v-for="item in ganZhiOptions"
                :label="item.label"
                :value="item.value"
              >
                {{ item.label }}
                <span
                  v-if="item.label === hourGanZhiBackups"
                  style="float: right; color: #8492a6; font-size: 12px"
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </Option>
            </Select>
            <span v-if="hourGanZhi !== hourGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻时柱
            </span>
          </div>
        </div>

        <div v-if="siZhuToDateTotal !== 0" class="data-sz">
          <Table
            height="235"
            size="small"
            highlight-row
            :columns="siZhuToDateColumns"
            :data="siZhuToDate"
          >
            <template #action="{ row, index }">
              <Button
                type="primary"
                size="small"
                @click="setNewDateMethod(row.solar)"
                >选择</Button
              >
            </template>
          </Table>
          <div class="sm">
            从公元{{ beginYear }}年~至今共&nbsp;{{
              siZhuToDateTotal
            }}&nbsp;条日期 【{{
              yearGanZhiBackups2 +
              "&nbsp;" +
              monthGanZhiBackups2 +
              "&nbsp;" +
              dayGanZhiBackups2 +
              "&nbsp;" +
              hourGanZhiBackups2
            }}】
          </div>
        </div>

        <template #footer>
          <span v-if="siZhuToDateTotal === 0">
            <Button
              :disabled="!siZhuToDateButtonStatus"
              long
              @click="getSiZhuToDateMethod"
              class="footer"
              >获取日期</Button
            >
          </span>
          <span v-else>
            <Button @click="siZhuToDateTotal = 0" long class="footer"
              >重新获取</Button
            >
          </span>
        </template>
      </Modal>

      <!-- 干支图示弹窗 -->
      <Modal
        v-model="ganZhiTuJieModal"
        class="ganZhiTuJieModal"
        :styles="{ top: '30px', minWidth: dialog }"
      >
        <template #header>
          <b class="header">
            <Icon type="ios-apps" />
            干支图示
          </b>
        </template>

        <!-- ★ 天干关系数据 -->
        <div class="gztj-data">
          <div v-for="item in tianGanTuJie" :key="item">
            <div v-html="item"></div>
          </div>
        </div>

        <div class="data-gz">
          <div class="divider-1">
            <el-divider />
          </div>

          <!-- 干支图示模式（四柱） -->
          <div v-if="ganZhiTuJieMode == 1" class="mode1">
            <div class="go">
              <div class="title-null">&nbsp;</div>
              <div class="title">年柱</div>
              <div class="title">月柱</div>
              <div class="title">日柱</div>
              <div class="title">时柱</div>
            </div>

            <div class="go">
              <div class="title-gz">天干</div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.yearGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.monthGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.dayGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.hourGan)" class="ganZhiSize"></b>
              </div>
            </div>

            <div class="go">
              <div class="title-gz">地支</div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.yearZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.monthZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.dayZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.hourZhi)" class="ganZhiSize"></b>
              </div>
            </div>
          </div>

          <!-- 干支图示模式（四柱+大运、流年） -->
          <div v-if="ganZhiTuJieMode == 2" class="mode2">
            <div class="go">
              <div class="title-null">&nbsp;</div>
              <div class="title">年柱</div>
              <div class="title">月柱</div>
              <div class="title">日柱</div>
              <div class="title">时柱</div>
              <div class="title">
                <span v-show="daYunLun != 1">大运</span>
                <span v-show="daYunLun == 1">小运</span>
              </div>
              <div class="title">流年</div>
            </div>

            <div class="go">
              <div class="title-gz">天干</div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.yearGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.monthGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.dayGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.hourGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b
                  v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(0, 1))"
                  class="ganZhiSize"
                ></b>
              </div>
              <div class="title">
                <b
                  v-html="
                    gzgl(liuNianMingPanData.liuNianGanZhi.substring(0, 1))
                  "
                  class="ganZhiSize"
                ></b>
              </div>
            </div>

            <div class="go">
              <div class="title-gz">地支</div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.yearZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.monthZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.dayZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.hourZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b
                  v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(1, 2))"
                  class="ganZhiSize"
                ></b>
              </div>
              <div class="title">
                <b
                  v-html="
                    gzgl(liuNianMingPanData.liuNianGanZhi.substring(1, 2))
                  "
                  class="ganZhiSize"
                ></b>
              </div>
            </div>
          </div>

          <!-- 干支图示模式（四柱+大运、流年、流月） -->
          <div v-if="ganZhiTuJieMode == 3" class="mode3">
            <div class="go">
              <div class="title-null">&nbsp;</div>
              <div class="title">年柱</div>
              <div class="title">月柱</div>
              <div class="title">日柱</div>
              <div class="title">时柱</div>
              <div class="title">
                <span v-show="daYunLun != 1">大运</span>
                <span v-show="daYunLun == 1">小运</span>
              </div>
              <div class="title">流年</div>
              <div class="title">流月</div>
            </div>

            <div class="go">
              <div class="title-gz">天干</div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.yearGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.monthGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.dayGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.hourGan)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b
                  v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(0, 1))"
                  class="ganZhiSize"
                ></b>
              </div>
              <div class="title">
                <b
                  v-html="
                    gzgl(liuNianMingPanData.liuNianGanZhi.substring(0, 1))
                  "
                  class="ganZhiSize"
                ></b>
              </div>
              <div class="title">
                <b
                  v-html="gzgl(liuYueMingPanData.liuYueGanZhi.substring(0, 1))"
                  class="ganZhiSize"
                ></b>
              </div>
            </div>

            <div class="go">
              <div class="title-gz">地支</div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.yearZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.monthZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.dayZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b v-html="gzgl(dataWanZheng.hourZhi)" class="ganZhiSize"></b>
              </div>
              <div class="title">
                <b
                  v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(1, 2))"
                  class="ganZhiSize"
                ></b>
              </div>
              <div class="title">
                <b
                  v-html="
                    gzgl(liuNianMingPanData.liuNianGanZhi.substring(1, 2))
                  "
                  class="ganZhiSize"
                ></b>
              </div>
              <div class="title">
                <b
                  v-html="gzgl(liuYueMingPanData.liuYueGanZhi.substring(1, 2))"
                  class="ganZhiSize"
                ></b>
              </div>
            </div>
          </div>

          <div class="divider-2">
            <el-divider />
          </div>
        </div>

        <!-- ★ 地支关系数据 -->
        <div class="gztj-data">
          <div v-for="item in diZhiTuJie" :key="item">
            <div v-html="item"></div>
          </div>
          <!-- <div class="gztj">
            <div class="line" style="margin-left:84%; width:7%;"></div>
            <div class="relation" style="margin-left:86.2%;">测试</div>
            <div class="ganZhi" style="margin-left:82%;">干</div>
            <div class="ganZhi" style="margin-left:91.3%;">支</div>
          </div> -->
        </div>

        <template #footer>
          <Button long @click="ganZhiTuJieModal = false" class="footer"
            >确认</Button
          >
        </template>
      </Modal>

      <!-- 人元司令分野参考弹窗 -->
      <Modal
        v-model="renYuanCanKaoModal"
        class="renYuanCanKaoModal"
        :styles="{ top: '30px', minWidth: dialog }"
      >
        <template #header>
          <b style="font-size: 16px">
            <Icon type="ios-book" />
            人元司令分野参考
          </b>
        </template>

        <div>
          <Tabs size="small" style="min-height: 210px; margin-top: -15px">
            <TabPane label="子平真诠法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊五日，庚九日，丙十六日</p>
                <p><b>午月</b>：丙十日，己九日，丁十一日</p>
                <p><b>未月</b>：丁九日，乙三日，己十八日</p>
                <p><b>申月</b>：戊己十日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="渊海子平法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊五日，庚九日，丙十六日</p>
                <p><b>午月</b>：丙十日，己十日，丁十日</p>
                <p><b>未月</b>：丁九日，乙三日，己十八日</p>
                <p><b>申月</b>：己七日，戊三日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="星平会海法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊五日，庚九日，丙十六日</p>
                <p><b>午月</b>：丙十日，己九日，丁十一日</p>
                <p><b>未月</b>：丁九日，乙二日，己十八日</p>
                <p><b>申月</b>：己七日，戊三日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="三命通会法决">
              <div>
                <p><b>子月</b>：壬九日，辛三日，癸十八日</p>
                <p><b>丑月</b>：癸七日，辛五日，己十八日</p>
                <p><b>寅月</b>：己七日，丙五日，甲十八日</p>
                <p><b>卯月</b>：甲九日，癸三日，乙十八日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊七日，庚五日，丙十八日</p>
                <p><b>午月</b>：丙九日，乙三日，丁十八日</p>
                <p><b>未月</b>：丁七日，乙五日，己十八日</p>
                <p><b>申月</b>：己七日，戊三日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚七日，丁三日，辛二十日</p>
                <p><b>戌月</b>：辛七日，丁五日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="神峰通考法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十二日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊七日，庚七日，丙十六日</p>
                <p><b>午月</b>：丙十日，己七日，丁十三日</p>
                <p><b>未月</b>：丁九日，乙三日，己十八日</p>
                <p><b>申月</b>：戊七日，壬七日，庚十六日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲七日，壬十六日</p>
              </div>
            </TabPane>

            <TabPane label="万育吾之法决">
              <div>
                <p><b>子月</b>：壬七日，癸二十三日</p>
                <p><b>丑月</b>：癸七日，庚五日，己十八日</p>
                <p><b>寅月</b>：己五日，丙五日，甲二十日</p>
                <p><b>卯月</b>：甲七日，乙二十三日</p>
                <p><b>辰月</b>：乙七日，壬五日，戊十八日</p>
                <p><b>巳月</b>：戊七日，庚五日，丙十八日</p>
                <p><b>午月</b>：丙七日，丁二十三日</p>
                <p><b>未月</b>：丁七日，甲五日，己十八日</p>
                <p><b>申月</b>：己五日，壬五日，庚二十日</p>
                <p><b>酉月</b>：庚七日，辛二十三日</p>
                <p><b>戌月</b>：辛七日，丙五日，戊十八日</p>
                <p><b>亥月</b>：戊五日，甲五日，壬二十日</p>
              </div>
            </TabPane>
          </Tabs>
        </div>

        <template #footer>
          <Button
            long
            @click="renYuanCanKaoModal = false"
            style="border-radius: 5px"
            >确认</Button
          >
        </template>
      </Modal>
    </div>
  </div>
</template>

<style scoped lang="scss" src="@/css/gongju/bazipaipan.scss"></style>

<style lang="scss">
/* 1、更多选项弹窗 */
.moreOptionsModal {
  .header {
    font-size: 16px;
  }

  .tabs {
    min-height: 260px;
    margin-top: -15px;

    // 1.1、四柱选项
    .siZhu {
      .mt {
        margin-top: 15px;
      }

      .select {
        width: 53%;

        .prefix {
          margin: 0 8px 0 5px;
          vertical-align: -3px;
        }
      }

      .fmr {
        font-size: 12px;
        margin-left: 10px;
        color: #969696;
      }
    }

    // 1.2、通用选项
    .tongYong {
      .renYuan {
        .select {
          width: 45%;

          .prefix {
            margin: 0 8px 0 5px;
            vertical-align: -3px;
          }
        }

        .ck {
          margin-left: 10px;
          color: rgb(85, 161, 242);
          cursor: pointer;
          font-size: 13px;
        }
      }

      .fmr {
        font-size: 12px;
        margin-left: 10px;
        color: #969696;
      }
    }
  }

  .footer {
    border-radius: 5px;
    background-color: rgb(249, 249, 249);
  }
}

/* 2、四柱转日期弹窗 */
.siZhuToDateModal {
  .header {
    font-size: 16px;
  }

  .siZhu {
    height: 230px;

    .beginYear {
      margin-bottom: 30px;

      .input {
        width: 182px;
        border: none;
        border-radius: 0;
        border-bottom: 1px rgb(220, 220, 220) solid;
      }
    }

    .res {
      font-size: 12px;
      margin-left: 10px;
    }

    .mt {
      margin-top: 10px;
    }

    .select {
      width: 50%;
    }

    .prefix {
      margin: 0 8px 0 5px;
      vertical-align: -3px;
    }

    .fmr {
      font-size: 12px;
      margin-left: 10px;
      color: #969696;
    }
  }

  .data-sz {
    height: 260px;
    overflow-y: auto;

    .sm {
      text-align: center;
      color: #ababab;
      margin: 5px 0 0 0;
      font-size: 12px;
    }
  }

  .data-sz::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .footer {
    border-radius: 5px;
    background-color: rgb(249, 249, 249);
  }
}

/* 3、干支图示弹窗 */
.ganZhiTuJieModal {
  .header {
    font-size: 16px;
  }

  .gztj-data {
    text-align: center;
    max-height: 150px;
    padding-top: 5px;
    overflow-y: auto;

    .gztj {
      height: 36px;
      width: 100%;
      position: relative;
      text-align: center;
      z-index: 999;

      .line {
        top: 28%;
        height: 1px;
        position: absolute;
        background-color: rgb(220, 220, 220);
      }

      .relation {
        top: -8px;
        position: absolute;
        white-space: nowrap;
        color: rgb(80, 80, 80);
      }

      .ganZhi {
        padding: 0;
        width: 25px;
        position: absolute;
        border-radius: 50px;
        background: white;
        border: 1px rgb(150, 150, 150) solid;
        font-size: 14px;
        color: rgb(100, 100, 100);
      }
    }
  }

  .data-gz {
    text-align: center;
    max-height: 500px;
    overflow-y: auto;

    .data-tg {
      margin: 5px 0 0 0;
    }

    .data-dz {
      // margin: 5px 0 0 0;
    }

    .divider-1 {
      margin: -20px 0 -15px 0;
    }

    .divider-2 {
      margin: 112px 0 -20px 0;
    }

    // 1、干支图示模式（四柱）
    .mode1 {
      .go {
        div {
          float: left;
          width: 22%;
          color: rgb(160, 160, 160);
        }

        .title-null {
          width: 12%;
        }

        .title-gz {
          width: 12%;
          line-height: 28px;
        }

        .ganZhiSize {
          font-size: 20px;
        }
      }
    }

    // 2、干支图示模式（四柱+大运、流年）
    .mode2 {
      .go {
        div {
          float: left;
          width: 14.5%;
          color: rgb(160, 160, 160);
        }

        .title-null {
          width: 12%;
        }

        .title-gz {
          width: 12%;
          line-height: 28px;
        }

        .ganZhiSize {
          font-size: 20px;
        }
      }
    }

    // 3、干支图示模式（四柱+大运、流年、流月）
    .mode3 {
      .go {
        div {
          float: left;
          width: 12.5%;
          color: rgb(160, 160, 160);
        }

        .title-null {
          width: 12%;
        }

        .title-gz {
          width: 12%;
          line-height: 28px;
        }

        .ganZhiSize {
          font-size: 20px;
        }
      }
    }
  }

  .gztj-data::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .gztj-data::-webkit-scrollbar-track {
    // background: rgb(240, 240, 240);
  }

  .gztj-data::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(200, 200, 200);
  }

  .gztj-data::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgb(185, 185, 185);
  }

  .gztj-data::-webkit-scrollbar-corner {
    background: rgb(185, 185, 185);
  }

  .box::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .box::-webkit-scrollbar-track {
    // background: rgb(240, 240, 240);
  }

  .box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(200, 200, 200);
  }

  .box::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgb(185, 185, 185);
  }

  .box::-webkit-scrollbar-corner {
    background: rgb(185, 185, 185);
  }

  .footer {
    border-radius: 5px;
    background-color: rgb(249, 249, 249);
  }
}
</style>
